<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<%@ page import="java.util.List"%>
<%@ page isELIgnored="false" %> <%--isELIgnored=true禁用EL表达式--%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/layui-v2.6.13/layui/css/layui.css" />
        <script type="text/javascript" src="<%=request.getContextPath() %>/layui-v2.6.13/layui/layui.js"></script>
        <script src="<%=request.getContextPath() %>/js/jquery.min-2.1.1.js"></script>
        <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

        <script>

            function update(id){
                layui.use('layer',function(){
                    layer.open({
                      type: 2,
                      title: '更新商品',
                      content: 'updatePage?id='+id,
                      area:['1000px','500px']
                    });
                })
            }
        </script>
		<style>
			table{
				border-collapse: collapse;/* 边框合并 */
			}
			th,td{
				border: 1px solid black;
				width: 80px;
			}
			.div1{
				margin-bottom: 20px;
			}
		</style>
	</head>
<body>
	<div style="padding: 20px;">
		<div>
			<form class="layui-form" action="list" method="POST" id="selectForm">
			    <div class="div1">
                    <div class="layui-inline">
                        <input type="text" id="gName" name="gName" class="layui-input" placeholder="商品名称" value="${obj.gName}">
                    </div>

                    <div class="layui-inline" padding:"0px 0px 0px 10px">
                        <select name="parentId" id="parentId" lay-filter="filter" >
                            <option value="">一级分类</option>
                            <c:forEach items="${parent}" var="obj">
                                <option <c:if test="${obj.sortId == pid.parentId}">selected=true</c:if>
                                value="${obj.sortId}">${obj.sName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <select name="sId" id="sId" >
                            <option value="">二级分类</option>
                            <c:forEach items="${sort}" var="sort">
                                <c:if test="${sort.parentId == sid.parentId}">
                                    <option <c:if test="${sort.sortId == sid.sId}">selected=true</c:if>
                                    value = "${sort.sortId}">${sort.sName}</option>
                                </c:if>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-radius layui-btn-primary"  >查询</button>
                    </div>
				</div>
			</form>


		</div>

		<div>
		    <div><button class="layui-btn layui-btn-primary " onclick="getAllChecked()">一键下架</button></div>

		    <table class="layui-table">
				<colgroup>

					<col width="100">
					<col width="200">
					<col width="200">
					<col width="200">
					<col width="200">
					<col width="200">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th><input type="checkbox" onclick="checkAll(this)" /></th>
						<th>商品名称</th>
						<th>商品图片</th>
						<th>库存</th>
						<th>单价</th>
						<th>所属分类</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
				<c:forEach items="${list}" var="obj">

                    <tr>
                        <td><input type="checkbox" name="k" value="${obj.id}"></td>
                        <td>${obj.gName}</td>
                        <td><img src="http://localhost:8887/${obj.imgUrl}"></td>
                        <td>${obj.gCount}</td>
                        <td>${obj.gPrice}</td>
                        <td>${obj.sName}</td>
                        <td>
                            <button class="layui-btn layui-btn-primary layui-btn-radius" onclick="update(${obj.id})">更新</button>
                        </td>
                    </tr>
                </c:forEach>


				</tbody>
			</table>
			<div style="text-align: center;">
                <button onclick="queryByPageNo(1,${totalPage})" class="layui-btn layui-btn-primary">首页</button>
                <button onclick="queryByPageNo(${pageNo-1},${totalPage})" class="layui-btn layui-btn-primary">上一页</button>
                <span>${pageNo} / ${totalPage}页</span>
                <button onclick="queryByPageNo(${pageNo+1},${totalPage})" class="layui-btn layui-btn-primary">下一页</button>
                <button onclick="queryByPageNo(${totalPage},${totalPage})" class="layui-btn layui-btn-primary">尾页</button>
            </div>
		</div>
		<script>
        function queryByPageNo(pageNo,totalPage){
            var params = $("#selectForm").serialize()
            console.info(params);
            if(pageNo < 1) pageNo=1;
            if(pageNo >totalPage) pageNo -=1;

            window.location.href="list?"+params+"&pageNo="+pageNo;
        }
        function checkAll(obj){
            var a = $(obj).prop("checked");
            if(a){
                $(":checkbox[name='k']").prop("checked", true);
            } else {
                $(":checkbox[name='k']").prop("checked", false);
            }
        }

        function getAllChecked(){
            var es = $(":checkbox[name='k']:checked");
            var params = "";
            $.each(es, function(index, item){
                console.info(item.value);
                params+=item.value+",";
            })
            console.info(params.substr(0, params.length-1));
            window.location.href="down?ids="+params.substr(0, params.length-1);
        }





		</script>
		<script>
        	//注册layui弹层组件
        	layui.use(['layer','form'], function(){
        		var layer = layui.layer;
        		var form = layui.form;

        		//二级联动：查询学院对应的专业列表
        		//select标签绑定触发事件
        		form.on('select(filter)', function(data){
        			console.info(data.elem);//得到select原始DOM对象
        			console.info(data.value);//得到该选中的值

        			var params = "parentId=" + data.value;

        			$.ajax({
        				url:"sId",
        				data:params,
        				type:"POST",
        				success: function(obj){
        					//json字符串转数组
        					var arr = JSON.parse(obj);

        					$("#sId").empty();

        					//添加子元素
        					$.each(arr, function(index, item){
        						$("#sId").append("<option value='"+item.sortId+"'>"+item.sName+"</option>");
        					});
        					//重新渲染select下拉框
        					form.render('select');
        				}
        			});
        		});
        	});
        </script>

	</div>
</body>

</html>